<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/form.css"/>
</head>
<body>
<div class="main">
    <h3>用户登录</h3>
    <div class="login-form">
        <div id="transform">
            <div id="show">
                <p>
                    <input placeholder="请输入账号" class="input" title="请输入账号">
                </p>
                <p>
                    <input placeholder="请输入密码" type="password" class="input" title="请输入密码">
                </p>
            </div>
            <div id="hide">
                <p>
                    <input placeholder="请输入电子邮箱地址" type="email" maxlength="32" class="input" title="请输入电子邮箱地址">
                </p>
            </div>
        </div>
        <p>
            <label id="checkbox"><input type="checkbox"> 7天内自动登录</label>
        </p>
        <p>
            <input id="submit" onclick="login()" type='button' value="点击登录" class="btn btn-left">
            <input onclick="location.assign('reg.html')" type='button' value="没有账号?" class="btn btn-right">
        </p>
    </div>

</div>
<script src="/js/jquery.min.js"></script>
<script src="/admin/js/layer-v3.5.1/layer/layer.js"></script>
<script src="/admin/js/lib.js"></script>
<script>
    var $email = $("input:eq(2)");
    var $name = $("input:eq(0)");
    var $password = $("input:eq(1)");
    var $autoLogin = $("input:eq(3)");
    var $submit = $("#submit");

    function login() {
        var name_length = $name.val().trim().length;
        if (name_length === 0) {
            layer.msg("请输入用户名");
            $name.focus();
            return false;
        }
        if ($password.val().length === 0) {
            layer.msg("密码不能为空!");
            $password.focus();
            return false;
        }
        if (name_length < 2 || $password.val().length < 8) {
            layer.msg("用户名或密码错误");
            return false;
        }

        layer.load();
        $.post("/email/login.do", {name: $name.val(), password: $password.val(), autoLogin: $autoLogin[0].checked}, function (data) {
            layer.closeAll();
            layer.msg(data.message);
            if (data.status >= 0) {
                location.assign("/");
            } else if (data.status === -2) {
                var $main = $("#transform");
                var height = $main.height();
                $main.css("height", height + "px");
                $submit[0].onclick = undefined;
                $("#show").fadeOut(300);
                setTimeout(function () {
                    $("#hide").fadeIn(300);
                    $submit[0].onclick = verify;
                    $email.focus();
                }, 310);
            }
        });
    }
    function verify() {
        if (!test_ipt(testEmail, $email)) {
            layer.msg("邮箱地址不正确");
            $email.focus();
            return false;
        }
        var windowId = layer.load();
        $.getJSON("/email/checkEmail.do", {email: $email.val(),name:$name.val(), autoLogin: $autoLogin[0].checked}, function (data) {
            layer.close(windowId);
            layer.msg(data.message);
            if (data.status === 0) {
                location.assign("/")
            }
        })
    }
    $(function () {
        $email.bind('input propertychange', function () {
            test_ipt(testEmail, $email);
        });
        $name.bind('input propertychange', function () {
            if (!test_ipt(testRealName, $name))
                test_ipt(testName, $name);
        });
        $password.bind('input propertychange', function () {
            test_ipt(testPasswd, $password);
        });
        setEnterKeyEvent($password, login);
        setEnterKeyEvent($name, login);
        setEnterKeyEvent($email, verify);
    })
</script>
</body>
</html>
